<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" dir="ltr">
<head th:include="include/wallet/walletHeader::html('登录')">
    <meta charset="UTF-8">
    <title>www.bootstrapmb.com - Neumorphism Login Form</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
</head>
<body>
<link rel="stylesheet" href="css/wallet/login.css">
<div th:replace="include/brower/browerNavigator::html"></div>
<script>
    $(function () {
        var data4Vue = {
            uri: 'registerKey',
            uri_login: 'loginByPrivate',
            message: [],
            privatekey: [],
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                this.check();
            },
            methods: {
                getPrivateKey: function () {
                    var url = this.uri;
                    axios.get(url).then(function (response) {
                        vue.message = response.data;
                    });
                },
                check: function () {
                    let switchCtn = document.querySelector("#switch-cnt");
                    let switchC1 = document.querySelector("#switch-c1");
                    let switchC2 = document.querySelector("#switch-c2");
                    let switchCircle = document.querySelectorAll(".switch__circle");
                    let switchBtn = document.querySelectorAll(".switch-btn");
                    let aContainer = document.querySelector("#a-container");
                    let bContainer = document.querySelector("#b-container");
                    let allButtons = document.querySelectorAll(".submit");

                    let getButtons = (e) => e.preventDefault()

                    let changeForm = (e) => {

                        switchCtn.classList.add("is-gx");
                        setTimeout(function () {
                            switchCtn.classList.remove("is-gx");
                        }, 1500)

                        switchCtn.classList.toggle("is-txr");
                        switchCircle[0].classList.toggle("is-txr");
                        switchCircle[1].classList.toggle("is-txr");

                        switchC1.classList.toggle("is-hidden");
                        switchC2.classList.toggle("is-hidden");
                        aContainer.classList.toggle("is-txl");
                        bContainer.classList.toggle("is-txl");
                        bContainer.classList.toggle("is-z200");
                    }

                    let mainF = (e) => {
                        for (var i = 0; i < allButtons.length; i++)
                            allButtons[i].addEventListener("click", getButtons);
                        for (var i = 0; i < switchBtn.length; i++)
                            switchBtn[i].addEventListener("click", changeForm)
                        $("")
                    }
                    window.addEventListener("load", mainF);
                },
                login: function () {
                    if (checkEmpty(this.privatekey, "Private Key")) {
                        if (checkPrivateKey(this.privatekey)) {
                            var url = this.uri_login;
                            $.ajax({
                                method: 'post',
                                url: url,
                                contentType: 'application/json',
                                data: JSON.stringify(this.privatekey),
                                dataType: "text",
                                success: function (data) {
                                    location.href = "wallet";
                                },
                            });
                        }
                    }
                },
                privateKeyChange: function () {
                    this.privatekey = $("#privateKey").val();
                    console.log(this.privatekey);
                }
            }
        });
    });
</script>
<div id="workingArea">
    <div class="container a-container" id="a-container">
        <form class="form" id="a-form">
            <h2 class="form_title title">创建账号</h2>
            <span class="form__span">本网站不会保存您的私钥和地址，请自行保存！</span>
            <input class="form__input" type="text" placeholder="Private Key" disabled="disabled"
                   :value="message.private">
            <input class="form__input" type="text" placeholder="Address" disabled="disabled" :value="message.address">
            <button class="form__button button submit" type="submit" v-on:click="getPrivateKey()">立即注册</button>
        </form>
    </div>
    <div class="container b-container" id="b-container">
        <form class="form" id="b-form">
            <h2 class="form_title title">登录网站</h2>
            <span class="form__span">本网站不会保存您的私钥，请不要泄露您的私钥！</span>
            <input id="privateKey" class="form__input" type="text" placeholder="Private Key"
                   v-on:change="privateKeyChange()">
            <button class="form__button button submit" v-on:click="login()">登录</button>
        </form>
    </div>
    <div class="switch" id="switch-cnt">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle--t"></div>
        <div class="switch__container" id="switch-c1">
            <h2 class="switch__title title">欢迎回来!</h2>
            <p class="switch__description description">使用私钥登录您的钱包</p>
            <button class="switch__button button switch-btn">立即登录</button>
        </div>
        <div class="switch__container is-hidden" id="switch-c2">
            <h2 class="switch__title title">你好朋友!</h2>
            <p class="switch__description description">一键注册您的区块链钱包</p>
            <button class="switch__button button switch-btn">立即注册</button>
        </div>
    </div>
</div>
<div th:replace="include/brower/browerFooter::html"></div>
</body>
</html>d